<template>
  <div>
    <van-sticky :offset-top="0">
      <div class="low_search">
        <div class="search">
          <i class="iconfont iconpisa" />
          <span>{{ recommend }}</span>
          <div class="bnt">搜索</div>
        </div>
      </div>
    </van-sticky>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommend: '鲜果派对甘草水果6元红包'
    }
  }
}
</script>

<style lang="scss" scoped>
.low_search {
    width: 100vw;
    height: 50px;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;

    .search {
      position: relative;
      width: 90vw;
      height: 36px;
      margin-left: 5vw;
      border-radius: 18px;
      border: 2px solid #23c3fd;
      .iconpisa {
        position: absolute;
        left: 0;
        top: 0;
        width: 40px;
        height: 24px;
        margin-top: 6px;
        color: #23c3fd;
        text-align: center;
        font-size: 24px;
        border-right: 1px solid #ccc;
      }
      span {
        margin-left: 50px;
        line-height: 36px;
        color: #a7a6ab;
      }
      .bnt {
        position: absolute;
        right: -2px;
        top: 0;
        width: 80px;
        height: 32px;
        background-color: #1dbcfc;
        border-radius: 18px;
        line-height: 36px;
        text-align: center;
        color: #fff;
      }
    }
  }
</style>
